<template>
  <div class="treeClass">
    <div class="actionTreeClass">
      <a-tree
        v-model="checkedKeys"
        :replaceFields="{ key:'id',title:'name',children:'children'}"
        checkable
        :auto-expand-parent="false"
        :tree-data="actionTreeData"
        :expanded-keys="actionKeys"
        :selected-keys="selectedKeys"
        @expand="onExpand"
        @check="v=>onCheck(v,)"
      />
        <!-- @select="onSelect" -->
    </div>
    <div class="actionKeys">
      <a-table
        :data-source="actionSource"
        :columns="actionColumns"
        :pagination="false"
        childrenColumnName="no"
        height="100%"
        rowKey='id'
      >
      </a-table>
    </div>
  </div>
</template>

<script>
import { queryCityGet } from "@/api/queryTool";

export default {
  props:{
    citys:{
      typeof:Array
    },
    value:{
      typeof:Array,
      default:[]
    }
  },
  data() {
    return {
      actionSource:[], // table显示（已选）数据
      actionColumns:[
        { title: '城市', dataIndex: 'name' }
      ],

      actionTreeData:[],  //树形绑定总数据
      actionKeys: [],
      checkedKeys: this.value,  //tree绑定值(选中)
      selectedKeys: [], // 选中树节点
      childrenCitys:this.citys
    };
  },
  watch: {
    // 监听 行为 选中数据
    checkedKeys(val) {
      // console.info(val,'watch')
      this.$emit('input',val)
      // this.$emit('setFields',val,'city')
    },
    actionSource(val){
      this.$emit('update:citys',val)
    }
  },
  created(){
    this.getData()
  },
  methods: {
    getData(){
      queryCityGet().then((res)=>{
        this.actionTreeData = res.data
      })
    },

    childrenData(actionTreeData){
      actionTreeData.forEach( ele => {
        if(ele.children){
          this.childrenData(ele.children)
        }
        if( this.checkedKeys.indexOf(ele.id) !== -1 ){
          this.actionSource.unshift(ele)
        }
      });
    },
    // 行为
    onCheck(val,node){
      console.info(val,node,'onCheck')
      this.actionSource = []
      this.childrenCitys = []
      this.childrenData(this.actionTreeData)
    },
    // 展示/收起 节点
    onExpand(actionKeys) {
      this.actionKeys = actionKeys;
      this.autoExpandParent = false;
    },
    // onSelect(selectedKeys, info) {
    //   console.info(selectedKeys,'onSelect')
    //   this.selectedKeys = selectedKeys;
    // },
  },
};
</script>

<style lang="less" scoped>
  .treeClass{
      // margin-left: 20px;
      display: flex;
      width: 100%;
      height: 300px;
      border: 1px solid #C1C1C1;
      .actionTreeClass{
        overflow-y: auto;
        width: 70%;
        height: 300px;
        // border: 1px solid blue;
      }
      .actionKeys{
        overflow-y: auto;
        width: 30%;
        height: 300px;
        // border: 1px solid blue;
        position: relative;
      }
    }
</style>